<template>
       <div>
      <van-nav-bar
        title="加工食品"
        left-text="返回"
        left-arrow
        @click="onClickLeft"
      />


      <div>
      <van-search v-model="value" placeholder="请输入搜索关键词" />
    </div>
     <div class="b1">
        <dl>
            <dt>
                <img src="../../assets/b1.png" />
            </dt>
            <dd>
                <p>包子 胡豆 夏豆 罗汉豆 川豆 倭豆</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
       <div class="b2">
        <dl>
            <dt>
                <img src="../../assets/b2.png" />
            </dt>
            <dd>
                <p>方便面 快餐面、泡面、速食面</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
       <div class="b3">
        <dl>
            <dt>
                <img src="../../assets/b3.png" />
            </dt>
            <dd>
                <p>馄饨 扁肉、抄手、清汤、扁食、云吞</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
       <div class="b4">
        <dl>
            <dt>
                <img src="../../assets/b4.png" />
            </dt>
            <dd>
                <p>饺子 绞饵、水饺</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
       <div class="b5">
        <dl>
            <dt>
                <img src="../../assets/b5.png" />
            </dt>
            <dd>
                <p>麦片</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
       <div class="b6">
        <dl>
            <dt>
                <img src="../../assets/b6.png" />
            </dt>
            <dd>
                <p>馒头 馍馍、饽饽</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
       <div class="b7">
        <dl>
            <dt>
                <img src="../../assets/b7.png" />
            </dt>
            <dd>
                <p>米粉 米线</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
       <div class="b8">
        <dl>
            <dt>
                <img src="../../assets/b8.png" />
            </dt>
            <dd>
                <p>米酒 </p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
       <div class="b9">
        <dl>
            <dt>
                <img src="../../assets/b9.png" />
            </dt>
            <dd>
                <p>面包</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
      </div>
</template>
<script>
import {ref} from 'vue'
const value = ref('');
const onClickLeft = ()=>history.back()
</script>

<style>
.b1{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
.b2{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}

.b3{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}

.b4{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}

.b5{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}

.b6{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}

.b7{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}

.b8{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}

.b9{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}

</style>
